<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    radarData: {  // 确保有这个props定义
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    radarData: {  // 监听数据变化
      deep: true,
      handler(val) {
        if (val && val.indicator && val.series) {
          this.initChart()
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 添加日志，检查组件是否接收到数据
      console.log('RaddarChart mounted, data:', this.radarData)
      this.initChart()
    })
  },
  methods: {
    initChart() {
      // 添加日志，检查initChart被调用时的数据
      console.log('RaddarChart initChart called with data:', this.radarData)
      
      this.chart = echarts.init(this.$el)
      
      // 构建雷达图配置
      const option = {
        backgroundColor: '#ffffff',
        title: {
          text: '奶茶产品分析',
          textStyle: {
            fontSize: 16,
            fontWeight: 'normal',
            color: '#303133'
          },
          left: 'center',
          top: 0
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#f5f5f5',
          borderWidth: 1,
          textStyle: {
            color: '#666',
          },
          padding: [12, 16],
          formatter: function(params) {
            return params.name + '<br/>' + params.marker + params.value;
          }
        },
        radar: {
          radius: '66%',
          center: ['50%', '50%'],
          name: {
            textStyle: {
              color: '#333',
              fontSize: 14,
              fontWeight: 'normal'
            }
          },
          indicator: this.radarData && this.radarData.indicator ? this.radarData.indicator : [
            { name: '销量', max: 100 },
            { name: '销售额', max: 100 },
            { name: '订单量', max: 100 },
            { name: '客单价', max: 100 },
            { name: '外卖占比', max: 100 },
            { name: '高峰表现', max: 100 }
          ],
          splitLine: {
            lineStyle: {
              color: ['#e6e6e6'],
              width: 1
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0.3)', 'rgba(240,240,240,0.3)']
            }
          },
          axisLine: {
            lineStyle: {
              color: '#d9d9d9',
              width: 1
            }
          }
        },
        legend: {
          bottom: 5,
          data: this.radarData && this.radarData.series ? this.radarData.series.map(item => item.name) : [],
          itemGap: 20,
          textStyle: {
            color: '#666',
            fontSize: 13
          },
          itemWidth: 12,
          itemHeight: 12
        },
        series: this.generateSeries()
      }
      
      this.chart.setOption(option)
    },
    generateSeries() {
      if (!this.radarData || !this.radarData.series || !this.radarData.series.length) {
        console.log('No series data found')
        return []
      }
      
      const colors = ['#409EFF', '#36A3F7', '#F4516C', '#34BFA3', '#FFB980']
      
      return this.radarData.series.map((item, index) => {
        const colorIndex = index % colors.length
        return {
          name: item.name,
          type: 'radar',
          lineStyle: {
            normal: {
              width: 2,
              color: colors[colorIndex]
            }
          },
          areaStyle: {
            normal: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: `rgba(${this.hexToRgb(colors[colorIndex])}, 0.5)`
                }, {
                  offset: 1, color: `rgba(${this.hexToRgb(colors[colorIndex])}, 0.1)`
                }]
              }
            }
          },
          symbolSize: 6,
          symbol: 'circle',
          data: [
            {
              value: item.value,
              name: item.name
            }
          ]
        }
      })
    },
    hexToRgb(hex) {
      // 去掉可能的#前缀
      hex = hex.replace('#', '')
      
      // 将3位颜色扩展为6位
      if (hex.length === 3) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
      }
      
      // 转换为RGB值
      const r = parseInt(hex.substring(0, 2), 16)
      const g = parseInt(hex.substring(2, 4), 16)
      const b = parseInt(hex.substring(4, 6), 16)
      
      return `${r}, ${g}, ${b}`
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>